import React, { memo, useEffect, useState } from 'react'
import { HotAnchorWrapper } from "./style"
import SingerHeader from "../../c-component/singer-header";
import { getHotAnchor } from '../../../../../../request/recommend';
import HotAnchorItem from './item';

export default memo(function HotAnchor() {

    const [anchorList, setAnchorList] = useState([]);

    // 此处不把数据存入redux
    useEffect(() => {
        getHotAnchor().then((res) => {
            // console.log(`list`, res.data.list);
            setAnchorList(res.data.list);
        }).catch((error) => {
            console.log(`error`, error);
        })
    }, [])
    return (
        <HotAnchorWrapper>
            <SingerHeader title="热门主播" isShowLink={false}/>
            <div className="item-wrapper">
            {
                anchorList.map((item, index) => {
                    return <HotAnchorItem key={item.nickName} {...item}/>
                })
            }
            </div>
        </HotAnchorWrapper>
    )
})
